import React, {PureComponent} from "react";
import {
    View,
    Text,
    StyleSheet,
    ScrollView,
    TouchableOpacity,
    ListView,
    Image,
    StatusBar,
    FlatList,
    Dimensions,
    PixelRatio
} from "react-native";
import OrderMenuItem from "../../common/widget/OrderMenuItem";
import GroupPurchaseCell from "../../common/widget/GroupPurchaseCell";
import DetailCell from "../../common/widget/DetailCell";
import SpacingView from "../../common/widget/SpacingView";
import color from "../../util/color";
type State = {
    discounts: Array<Object>,
    dataList: Array<Object>,
    refreshing: boolean,
}
class OrderScene extends PureComponent<State> {

    constructor(props: Props) {
        super(props)
        this.state = {
            dataList: [],
            refreshing: false
        }
    }

    static navigationOptions = ({navigation}: any) => ({
        headerTitle: "订单信息",
        headerStyle: {
            backgroundColor: color.primary,
            elevation: 0,
            borderBottomWidth: 0,
        },
    })

    renderHeader = () => {
        return (
            <View>

                <View style={styles.line}/>

                <View style={styles.itemContainer}>
                    <OrderMenuItem title='全部订单' icon={require('../../../res/img/order/daipingjia.png')}/>
                    <OrderMenuItem title='未支付' icon={require('../../../res/img/order/daifukuan.png')}/>
                    <OrderMenuItem title='已支付' icon={require('../../../res/img/order/yifukuan.png')}/>
                    <OrderMenuItem title='已取消' icon={require('../../../res/img/order/tuikuan.png')}/>
                </View>
                <SpacingView />

                <DetailCell title='最近浏览' subtitle='查看全部' style={{height: 38}}/>

            </View>
        )
    }

    componentDidMount() {
        this.requestData()
    }

    requestData = () => {
        this.requestRecommend()
    }

    requestRecommend = async() => {

        this.setState({refreshing: true})

        try {
            let response = await fetch('http://www.wanandroid.com/tools/mockapi/2536/getRecommend')
            let json = await response.json()

            let dataList = json.data.map(
                (info) => {
                    return {
                        id: info.id,
                        imageUrl: info.imgurl,
                        title: info.mname,
                        subtitle: `[${info.range}]${info.title}`,
                        price: info.price
                    }
                }
            )

            this.setState({
                dataList: dataList,
                refreshing: false
            })
        } catch (error) {
            this.setState({refreshing: false})
        }
    }

    keyExtractor = (item: Object, index: number) => {
        return item.id + ''
    }

    renderCell = (info: Object) => {
        return (
            <GroupPurchaseCell
                info={info.item}
                onPress={this.onCellSelected}
            />
        )
    }

    onCellSelected = (info: Object) => {
        StatusBar.setBarStyle('default', false)
        this.props.navigation.navigate('GroupPurchase', {info: info})
    }

    render() {
        return (
            <View style={styles.container}>

                <FlatList
                    ListHeaderComponent={this.renderHeader}
                    data={this.state.dataList}
                    renderItem={this.renderCell}
                    keyExtractor={this.keyExtractor}
                    onRefresh={()=>{
                        this.requestData()
                    }}
                    refreshing={this.state.refreshing}
                />

            </View>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    itemContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    line: {
        width: Dimensions.get('window').width,
        height: 1 / PixelRatio.get(),
        backgroundColor: color.border,
    },
})


export default OrderScene
